<!-- 商家销量统计的横向柱状图 -->
<template>
  <div class="com-container">
      <div class="com-chart" ref='seller_ref'></div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
    data(){
        return{
            //echarts实例对象
            chartInstance:null,
            //保存服务器返回的数据
            allData:null,
            //当前页数
            currentPage:1,
            //总共的页数
            totalPage:0,
            //定时器标识
            timerId:''
        }
    },
    created() {
        //在组件创建的时候进行webSocket回调函数的注册
        this.$socket.registerCallBack('sellerData',this.getData)
    },
    mounted(){
        this.initChart()
        // this.getData()
        window.addEventListener('resize',this.screenAdapter)
        //页面加载完成主动进行屏幕的适配
        this.screenAdapter()
        //使用websocket发送给服务器
        this.$socket.send({
            action:'getData',
            socketType:'sellerData',
            chartName:'seller',
            value:''
        })

    },
    destroyed() {
        //在组件销毁时关闭定时器
        clearInterval(this.timerId)
        // 在组件销毁时，将监听器取消（防止内存泄漏）
        window.removeEventListener('resize',this.screenAdapter)
        //在组件销毁的时候进行webSocket回调函数的取消
        this.$socket.unRegisterCallBack('sellerData')
    },
    computed:{
        ...mapState(['theme'])
    },
    watch:{
        theme(){
            this.chartInstance.dispose()  //销毁图表
            this.initChart()  //以最新的主题初始化图表
            this.screenAdapter()  //重新适配屏幕
            this.updatChart()  //更新数据
        }
    },
    methods:{
        //初始化echarts实例对象
        initChart(){
            this.chartInstance = this.$echarts.init(this.$refs.seller_ref,this.theme)
            //对图表初始化配置
            const initOption = {
                title:{
                    text:'▎商家销售统计',
                    top:20,
                    left:20
                },
                grid:{
                    top:'20%',
                    left:'3%',
                    right:'6%',
                    bottom:'3%',
                    containLabel:true //距离包含坐标轴的文字
                },
                xAxis:{
                    type:'value'
                },
                yAxis:{
                    type:'category'
                },
                tooltip:{
                    trigger:'axis',
                    axisPointer:{
                        type:'line',
                        z:0,
                        lineStyle:{
                            color:'#2D3443'
                        }
                    }
                },
                series:[
                    {
                        type:'bar',
                        label:{
                            show:true,
                            position:'right',
                            textStyle:{
                                color:'white'
                            }
                        },
                        itemStyle:{
                            // barBorderRadius:[0,33,33,0], //设置每个柱状图圆角（左上，右上，右下，左下）
                            //指明颜色渐变的方向 (x1,y1,x2,y2,[])
                            //指明不同百分比下的颜色值
                            color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[
                                //百分之0下的颜色值
                                {
                                    offset:0,
                                    color:'#5052EE'
                                },
                                //百分之100下的颜色值
                                {
                                    offset:1,
                                    color:'#AB6EE5'
                                }
                            ])
                        }
                    }
                ]
            }
            this.chartInstance.setOption(initOption)
            // 监听图表鼠标事件
            this.chartInstance.on('mouseover',()=>{
                clearInterval(this.timerId) //鼠标移入图表时关闭定时器
            })
            this.chartInstance.on('mouseout',()=>{
                this.startInterval() //鼠标移出图表时重新开启定时器
            })
        },
        // 获取服务器数据
        getData(ret){
            // let {data:ret} = await this.$http.get('seller')
            this.allData = ret
            this.allData.sort((a,b)=>{
                return a.value - b.value //从小到大排序
            })
            //每5个元素一页
            this.totalPage = this.allData.length % 5 === 0 ? this.allData.length / 5 : this.allData.length / 5 + 1
            this.updatChart()
            // 启动定时器自动更新页码
            this.startInterval()
        },
        // 更新图表
        updatChart(){
            const start = (this.currentPage - 1) * 5
            const end = this.currentPage * 5
            const showData = this.allData.slice(start,end)
            const sellerName = showData.map((item)=>{
                return item.name
            })
            const sellerValue = showData.map((item)=>{
                return item.value
            })
            const dataOption = {
                yAxis:{
                    data:sellerName
                },
                series:[
                    {
                        data:sellerValue
                    }
                ]
            }
            this.chartInstance.setOption(dataOption)
        },
        //定时更新页码
        startInterval(){
            //判断有没有已经开启的定时器
            if(this.timerId){
                clearInterval(this.timerId)
            }
            this.timerId = setInterval(()=>{
                this.currentPage++
                if(this.currentPage > this.totalPage){
                    this.currentPage = 1
                }
                this.updatChart()
            },3000)
        },
        //当浏览器窗口发生变化时，改变图表的大小
        screenAdapter(){
            //图表标题的大小
            const titleFontSize = this.$refs.seller_ref.offsetWidth / 100 * 3.6
            //和分辨率大小相关的配置项
            const adapterOption = {
                title:{
                    textStyle:{
                        fontSize:titleFontSize
                    }
                },
                tooltip:{
                    axisPointer:{
                        lineStyle:{
                            width:titleFontSize
                        }
                    }
                },
                series:[
                    {
                        barWidth:titleFontSize,
                        itemStyle:{
                            barBorderRadius:[0,titleFontSize / 2,titleFontSize / 2,0], //设置每个柱状图圆角（左上，右上，右下，左下）
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adapterOption)
            // 调用图表的resize方法
            this.chartInstance.resize()
        }
    }
}
</script>

<style lang='less' scoped>

</style>